import React from 'react';
import { GridLegacy as Grid, Card, CardContent } from '@mui/material';

interface GridLayoutProps {
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

const GridLayout: React.FC<GridLayoutProps> = ({ children, className = '', style }) => {
  // left-hand-side-top - left-hand-side-bottom - right-hand-side - others
  const childrenArray = React.Children.toArray(children);
  const [lhst, lhsb, rhs, ...others] = childrenArray;

  return (
    <div className={`layoutVerticalFit ${className}`} style={style}>
      <Grid container spacing={1} alignItems="stretch">
        <Grid item>
          <Card elevation={0}>
            <CardContent>
              {lhst}
              {lhsb}
            </CardContent>
          </Card>
        </Grid>
        {rhs && (
          <Grid item>
            <Card elevation={0}>
              <CardContent>{rhs}</CardContent>
            </Card>
          </Grid>
        )}
      </Grid>
      {others.length > 0 && <>{others}</>}
    </div>
  );
};

export default GridLayout;

